import './admin.less'
import { useState } from 'react'
const list = [{
    src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F8707069266%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636351354&t=6d7aa72d65259c3d81b6780a802090d3',
    title: '戴拿奥特曼'
},{
    src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Ff6b459bd0d44afbd65f067e74dd29c10ca550cbf.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636351354&t=009926eefa2905d229c89f2083403258',
    title: '迪迦奥特曼正常形态'
},{
    src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F6298697fea50539b2d191a03efa0cf5aec521375.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636351354&t=905fb3acf7183c97f5fc27ce441f52d5',
    title: '迪迦奥特曼蓝色急速形态'
},{
    src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F8234306219%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636351354&t=d85666ade9ad6e82a22d238b6a9d5019',
    title: '迪迦奥特曼红色强力形态'
}
]
function cls(def, ...conditions) {
    const list = [def]
    conditions.forEach(cond => {
        if(cond[0]) {
            list.push(cond[1])
        }
    })
    return list.join(' ')
}
export default function Admin() {
    return (
        <div className="admin">
            <DraggableList list={list}></DraggableList>
        </div>
    )
}

function Card({src, title}) {
    return (
        <div className="card">
            <img src={src} alt="图片加载失败" />
            <span>{title}</span>
        </div>
    )
}

const DRAGGABLE = 'DRAGGABLE'
const BAR  = 'BAR'
function draggable(item, id) {
    return {
        type: DRAGGABLE,
        id,
        data: item
    }
}
function DraggableList({list}) {
    const {draglist, createDropperProps, createDraggerProps} = useDraggable(list)
    return draglist.map((item, i) => {
    if(item.type ==='BAR') {
            return <Bar id={i} {...createDropperProps(i)} key={item.id} />
        }else {
            return <Draggable {...createDraggerProps(i, item.id)}>
            <Card {...item.data}></Card>
            </Draggable>
        }
    })
}
function Draggable({children,eventHandlers, dragging, id}) {
    return (
        <div draggable={true} {...eventHandlers} className={cls("draggable",[dragging === id,"dragging"])}>
            {children} 
        </div>
    )
}

function Bar({id,dragging,dragOver,eventHandlers}) {
    if (id === dragging + 1) {
        return null
    }
    return <div {...eventHandlers} className={cls('draggable-bar',[dragOver ===id, 'dragover'])}>
        <div
        className="inner"
        style={{
          height: id === dragOver ? "80px" : "0px"
        }}
      />
    </div>
}
function useDraggable(list) {
    const [draglist, setDraglist] = useState(() => insertBars(list))
    const [dragOver, setDragOver] = useState(null)
    const [dragging, setDragging] = useState(null)
    return {
        draglist,
        createDropperProps: id => {
            return {
                dragging,
                dragOver,
                eventHandlers: {
                    onDragOver: (e) => {
                        e.preventDefault()
                        setDragOver(id)
                    },
                    onDragLeave: (e) => {
                        e.preventDefault()
                        setDragOver(null)
                    },
                    onDrop: e => {
                        e.preventDefault();
                        setDragOver(null);
                        setDraglist(list => {
                          return clacChangeing(list, dragging, id);
                        });
                      }
                }
            }
        },
        createDraggerProps: (id,key) => {
            return {
                id,
                key,
                dragging,
                eventHandlers: {
                    onDragStart: () => {
                        setDragging(id)
                    },
                    onDragEnd: () => {
                        setDragging(null)
                    }
                }
            }
        }
    }
}
function insertBars(list) {
    let i = 0 // ID
    const newBar = () => {
        return {
            type: BAR,
            id: i++
        }
    }
    return [newBar()].concat(...list.map(item => {
        return [draggable(item,i++), newBar()]
    }))
}
function clacChangeing(list, drag, drop) {
    list = list.slice()
    const dragItem = list[drag];
    const dir = drag > drop ? -2 : 2;
    const end = dir > 0 ? drop - 1: drop + 1 
    for(let i = drag; i !== end ; i += dir) {
        list[i] = list[i + dir]
    }
    list[end] = dragItem;
    return list;
}